<template>
  <view-box class="whome" bodyPaddingTop="0" bodyPaddingBottom="0">
    <full-page ref="fullpage" :options="options" id="fullpage">
      <div class="section">
        <img src="static/img/home-1.jpg" class="img">
        <p class="zwyjs">
          政务云介绍
        </p>
        <div class="gonext" @click="gonext">
          <x-icon type="ios-arrow-down" size="30"></x-icon>
          <x-icon type="ios-arrow-down" size="30" class="ios-arrow"></x-icon>
        </div>
      </div>
      <div class="section">
        <div>
          <div class="titles"></div>
          <div class="jsnr">建设背景</div>
        </div>
        <img src="static/img/home-2.jpg" class="img">
        <flexbox orient="vertical">
          <flexbox-item>
            <flexbox class="redivtextone">
              <flexbox-item :span="1">
                <div class="rediv"></div>
              </flexbox-item>
              <flexbox-item>
                <div class="redivtext">吸收了北京、上海、江苏、浙江等地区深化行政审批制度改革、政务大数据建设实践的成果经验</div>
              </flexbox-item>
            </flexbox>
          </flexbox-item>

          <flexbox-item>
            <flexbox class="redivtextone">
              <flexbox-item :span="1">
                <div class="rediv"></div>
              </flexbox-item>
              <flexbox-item>
                <div class="redivtext">遵循市互联网+行动委员会制定的”互联网+11711行动计划”</div>
              </flexbox-item>
            </flexbox>
          </flexbox-item>

          <flexbox-item>
            <flexbox class="redivtextone">
              <flexbox-item :span="1">
                <div class="rediv"></div>
              </flexbox-item>
              <flexbox-item>
                <div class="redivtext">利用较成熟的网络资源基础设施建设成果</div>
              </flexbox-item>
            </flexbox>
          </flexbox-item>

          <flexbox-item>
            <flexbox class="redivtextone">
              <flexbox-item :span="1">
                <div class="rediv"></div>
              </flexbox-item>
              <flexbox-item>
                <div class="redivtext">推进武汉市“一号一网一窗”项目建设</div>
              </flexbox-item>
            </flexbox>
          </flexbox-item>
          <flexbox-item>
            <flexbox class="redivtextone">
              <flexbox-item :span="1">
                <div class="rediv"></div>
              </flexbox-item>
              <flexbox-item>
                <div class="redivtext">推动武汉市“马上办、网上办、一次办”改革工作</div>
              </flexbox-item>
            </flexbox>
          </flexbox-item>
        </flexbox>
        <div class="gonext1" @click="gonext">
          <x-icon type="ios-arrow-down" size="30"></x-icon>
          <x-icon type="ios-arrow-down" size="30" class="ios-arrow"></x-icon>
        </div>
      </div>
      <div class="section">
        <div>
          <div class="titles"></div>
          <div class="jsnr"> 建设内容</div>
        </div>

        <flexbox :gutter="0">
          <flexbox-item>
            <div class="rekdiv"></div>
            <div class="redivtextbg"></div>

          </flexbox-item>
          <flexbox-item>
            <div class="rekdiv bc1"></div>
            <div class="redivtextbg"></div>
          </flexbox-item>
          <flexbox-item>
            <div class="rekdiv bc2"></div>
            <div class="redivtextbg"></div>
          </flexbox-item>
          <flexbox-item>
            <div class="rekdiv bc3"></div>
            <div class="redivtextbgs"></div>
          </flexbox-item>
        </flexbox>
        <flexbox :gutter="0">
          <flexbox-item>
            <div class="bgtitle">
              <br /> 资
              <br /> 源
              <br /> 目
              <br /> 录
              <br /> 体
              <br /> 系
              <br />
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="bgtitle bgc1">
              共<br />享<br />交<br />换<br />技<br />术<br />体<br />系
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="bgtitle bgc2">
              梳<br />理<br />共<br />享<br />交<br />换<br />服<br />务
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="bgtitle bgc3">
              共<br />享<br />交<br />换<br />服<br />务<br />实<br />施
            </div>
          </flexbox-item>
        </flexbox>
        <flexbox :gutter="0">
          <flexbox-item>
            <div class="nrtext">
              建设统一的目录管理平台，并利用工具，全面梳理市直单位政务数据资源目录
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="nrtext">
              建设统一的共享交换服务接口平台，制定政务数据共享交换服务接口技术标准规范及管理流程
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="nrtext">
              按照实际办事及应用事项，梳理各行政机关跨单位政务数据和证照数据需求
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="nrtext">
              兼容各提供方数据结构，提供数据库采集、数据接口挂接、电子文件上传、手工录入多种方式获取数据
            </div>
          </flexbox-item>
        </flexbox>
        <div class="gonext2" @click="gonext">
          <x-icon type="ios-arrow-down" size="30"></x-icon>
          <x-icon type="ios-arrow-down" size="30" class="ios-arrow"></x-icon>
        </div>
      </div>
      <div class="section">
        <flexbox orient="vertical">
          <flexbox-item>
            <div class="titles"></div>
            <div class="jsnr"> 共享模式突破</div>
          </flexbox-item>
          <flexbox-item>
            <img src="static/img/home-4.jpg" class="img">
          </flexbox-item>
          <flexbox-item>
            <div class="gxtext gxtextf">
              全国首家采用“物理分散、逻辑集中”的数据共享模式
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="gxtext">
              政务数据“物理分散”，不集中存储，降低设备建设投资，避免行政成本浪费
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="gxtext">
              兼容前置数据库、数据接口API、电子附件三种类型的数 据交换方式，通过技术手段，实现各局政务数据的“逻 辑集中”
            </div>
          </flexbox-item>

        </flexbox>
        <div class="gonext3" @click="gonext">
          <x-icon type="ios-arrow-down" size="30"></x-icon>
          <x-icon type="ios-arrow-down" size="30" class="ios-arrow"></x-icon>
        </div>
      </div>
      <div class="section">
        <flexbox orient="vertical">
          <flexbox-item>
            <div class="titles"></div>
            <div class="jsnr"> 设计思路突破</div>
          </flexbox-item>
          <flexbox-item>
            <img src="static/img/home-4.jpg" class="img ">
          </flexbox-item>
          <flexbox-item>
            <div class="gxtext">
              打破传统的把政务数据"交出去、不管理"的数据交 换模式，把单个部门即看作"供方"和"需方"，促 成了双向的、良性的共享机制
            </div>
          </flexbox-item>
        </flexbox>
        <divider class="over"> over</divider>
      </div>

    </full-page>

  </view-box>
</template>
<script>
import { ViewBox, Flexbox, FlexboxItem, Divider } from "vux";
// import {
//   mapState, mapMutations, mapGetters, mapActions
// } from "vuex";
export default {
    name: "whome",
    components: {
        ViewBox,
        Flexbox,
        FlexboxItem,
        Divider
    },
    data() {
        return {
            title: "",
            options: {}
        };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        gonext() {
            this.$refs.fullpage.api.moveSectionDown();
        }
    }
};
</script>
<style lang="less">
.whome {
    background-color: #efeff4;
    .img {
        height: auto;
        width: 100%;
    }

    .zwyjs {
        margin-top: 120px;
        font-size: 26px;
        text-align: center;
    }
    .titles {
        float: left;
        width: 8px;
        height: 22px;
        margin-top: 20px;
        margin-left: 10px;
        background-color: #5b92eb;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .jsnr {
        float: left;
        margin-top: 20px;
        margin-left: 10px;
        text-align: left;
        font-size: 18px;
        line-height: 22px;
    }
    .rediv {
        //margin-top: 28px;
        margin-left: 20px;
        width: 15px;
        height: 15px;
        background-color: #39b1f0;
        border-radius: 15px;
        vertical-align: top;
    }
    .rekdiv {
        margin-top: 28px;
        margin-left: 30px;
        width: 20px;
        height: 20px;
        border-color: #0b5686;
        border-width: 5px;
        border-style: solid;
        background-color: #efeff4;
        border-radius: 20px;
        vertical-align: top;
    }
    .bc1 {
        border-color: #f8c63e;
    }
    .bc2 {
        border-color: #d9405b;
    }
    .bc3 {
        border-color: #49adad;
    }
    .redivtext {
        margin-left: 10px;
        line-height: 25px;
        float: left;
    }
    .redivtextbg {
        background-color: #e5e6e7;
        height: 5px;
        width: 72%;
        float: left;
        position: relative;
        left: 58%;
        top: -16px;
    }
    .redivtextbgs {
        background-color: #fff;
        height: 5px;
        width: 72%;
        float: left;
        position: relative;
        left: 58%;
        top: -16px;
    }
    .redivtextone {
        margin-top: 20px;
    }
    .bgtitle {
        margin-top: 28px;
        margin-left: 10px;
        height: 260px;
        width: 60px;
        background-color: #0b5686;
        border-color: #fff;
        border-width: 5px;
        border-style: solid;
        box-shadow: #666 0px 0px 10px;
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
        text-align: center;
        color: #fff;
        font-size: 23px;
        line-height: 30px;
    }
    .bgc1 {
        background-color: #f8c63e;
    }
    .bgc2 {
        background-color: #d9405b;
    }
    .bgc3 {
        background-color: #49adad;
    }
    .nrtext {
        margin-top: 28px;
        margin-left: 5px;
        color: #68696a;
        padding: 5px;
        vertical-align: top;
        height: 280px;
    }
    .gxtext {
        padding: 10px 30px 10px 30px;
    }
    .gxtextf {
        color: #1871bc;
        font-size: 20px;
        font-weight: bold;
    }
    .over {
        margin-top: 40%;
        font-size: 16px;
    }
    .gonext {
        margin: 0 auto;
        z-index: 100;
        width: 30px;
        height: 30px;
        margin-top: 40px;
        display: none;
    }
    .gonext1 {
        margin: 0 auto;
        z-index: 100;
        width: 30px;
        height: 30px;
        margin-top: 20px;
        display: none;
    }
    .gonext2 {
        position: relative;
        z-index: 100;
        width: 30px;
        height: 30px;
        left: 45%;
        top: -50px;
        display: none;
    }
    .gonext3 {
        position: relative;
        z-index: 100;
        width: 30px;
        height: 30px;
        left: 45%;
        top: 20px;
        display: none;
    }
    .ios-arrow {
        position: relative;
        top: -30px;
    }
}
</style>

